iT邦幫忙

2022 iThome 鐵人賽

DAY 12
0
自我挑戰組

30天的網頁學習系列 第 12

Day12 | CSS之transform-origin

  • 分享至 

  • xImage
  •  

今天要來做第六張網美照,照片下層用兩個同比例的方形以左上為原點轉動角度,再配上文字,就完成啦~/images/emoticon/emoticon12.gif

筆記區

一、transform-origin

圖形的原點皆預設為圖形正中間,若要改變原點使用transform-origin加方向即可,像是第二天成果展示的瓢蟲hover後翅膀向左右兩側展開,就是改變原點所帶來的效果。
left top 左上
right top 右上
left bottom 左下
right bottom 右下
還可以圖形的絕對位置表示 10px 10px

二、角度

看圖來理解,兩個同角度不同原點的圖形,呈現方式一致(圖形顏色好像太深了,請各位見諒啦~)
https://ithelp.ithome.com.tw/upload/images/20220926/20152010O3pznJdseg.png
https://ithelp.ithome.com.tw/upload/images/20220926/20152010O1I6AOkEG5.png

今天的筆記有點少,那就來補充一些個人心得(廢話的部分),開賽到現在已經是第十二天了,進度超過三分之一,其實每天寫一篇文章,真的頗需毅力,再加上學校也有蠻多事情要處理,好幾次都差點忘記,由衷佩服前幾屆可以完賽的選手!!持之以恆下去吧~再撐18天,加油加油!!/images/emoticon/emoticon34.gif

成果展示

https://ithelp.ithome.com.tw/upload/images/20220926/20152010lZHbDmufIS.png

參考資料

mdn web doc__transform-origin
量角器


上一篇
Day11 | CSS之水平與垂直置中
下一篇
Day13 | CSS之margin&padding
系列文
30天的網頁學習30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言